import React from 'react'
import _ from 'underscore'
import View from 'lib/View.jsx'
import RootScope from './RootScope.es6'
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import GeoMapWidget from 'lib/components/GeoWidget.jsx'
import addWidgetMixin from '../common/NewDashboardWidget.jsx'
export default class RootView extends View {
  constructor(props){
    super(props);
  }

  drillHandler() {
    if (this.showWorld) {
      location.href = '#/country/'+this.id;
    } else {
      location.href = '#/region/'+this.id+'/'+this['cn-code'];
    }
  }

  render(){
    var title;
    if(this.scope.viewKey==='avg_resp'){
      title = 'HTTP 响应时间'
    }else if(this.scope.viewKey==='thp'){
      title = '吞吐量'
    }else if(this.scope.viewKey==='total_receive_size'){
      title = '传输数据量'
    }else if(this.scope.viewKey==='session_count'){
      title = '活跃会话数'
    }else if(this.scope.viewKey==='error_rate'){
      title = '网络错误率'
    }
    return (
      <div>
        <div className="box">
          <Card title={title} extra={
              // addWidgetMixin(this.scope.chart0Api,title)
              null
            }>
            <GeoMapWidget
              key={this.state.geoKey}
              store={this.state.chart0}
              allowOverlap={!this.props.showWorld}
              legend={this.state.geoLegend}
              onPointClick={this.drillHandler} />
          </Card>
        </div>
        <div className="box">
          <Card title={title} extra={
              addWidgetMixin(this.scope.chart1Api,title)
            }>
            <ChartWidget store={this.state.chart1}/>
          </Card>
        </div>
      </div>
    )
  }
}

RootView.defaultProps = {
  Scope:RootScope
}
